<template>
	<view class="film">
		<view class="nav">
			<uni-nav-bar title="电影" backgroundColor="transparent" left-icon="left" @clickLeft="goback" left-width="300rpx" right-width="300rpx">
				<block slot="right">
					<view class="location" @click="toChooseAddress">
						<image src="/static/index/loc.png"></image>
						<view style="flex: 1;text-align: center;" class="hidden">{{movieLocation.name || movieLocation.cityName}}</view>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		

		
		<view class="tab">
			<scroll-view scroll-x="true" style="width: 100%;">
				<view class="date_tab">
					<view v-for="(item,index) in dataList" :key="index" :id="date == item.data ? 'select' :''" @click="onDateChange(item.data)">
						<text v-if="index==0">今天</text>
						<text v-else-if="index==1">明天</text>
						<text v-else-if="index==2">后天</text>
						<text v-else-if="item.week == 0">周日</text>
						<text v-else-if="item.week == 1">周一</text>
						<text v-else-if="item.week == 2">周二</text>
						<text v-else-if="item.week == 3">周三</text>
						<text v-else-if="item.week == 4">周四</text>
						<text v-else-if="item.week == 5">周五</text>
						<text v-else-if="item.week == 6">周六</text>
						<uni-dateformat :date="item.data" format="MM-dd"></uni-dateformat>
					</view>
				</view>
			</scroll-view>
		</view>
		

		<view class="cinema_list">
			<view class="box">
				<view class="screen">
					<view class="select" @click="toChooseAddress">
						<text>{{movieLocation.cityName}}</text>
						<image src="/static/search/shaixuandown.png"></image>
					</view>
				</view>
				<scroll-view :scroll-y="true" class="list">
					<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="今日无排期" :width="161" :height="129" v-show="moveList.length == 0"></blankPage>
					<view class="item" @click="toDetail(item)" v-for="(item,index) in moveList" :key="index">
						<view class="top">
							<view>{{item.cinemaName}}</view>
							<text><i>￥{{item.downPrice}}</i>起</text>
						</view>
						<view class="bottom">
							<view>{{item.cinemaAddress}}</view>
							<text>{{item.distanceText}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import filmList from '@/components/filmList/filmList.vue'
	import { mapState } from 'vuex'//引入mapState
	export default {
		components:{
			filmList,
		},
		watch:{
			movieLocation:function(newvalue,oldvalue){
				if(newvalue.latitude != oldvalue.latitude || newvalue.longitude != oldvalue.longitude){
					this.list = []
					this.moveList = []
					this.getDetail()
				}
			},
		},
		data() {
			return {
				index: 1,
				
				search:'', // 搜索内容
				
				date:1,
				
				id:0,
				
				moveList:[],
				page:1,
				total:0,
				
				up_date:'',
				
				dataList:[
					{
						data:'',
						week:'',
					},
					{
						data:'',
						week:'',
					},
					{
						data:'',
						week:'',
					},
					{
						data:'',
						week:'',
					},
					{
						data:'',
						week:'',
					},
					{
						data:'',
						week:'',
					},
					{
						data:'',
						week:'',
					},
				],
			}
		},
		methods: {
			goback(){ uni.navigateBack() },
			onTab(e) {
				this.index = e
			},
			toChooseAddress(){
				uni.navigateTo({
					url:'/otherpages/chooseAddress/loactionList'
				})
			},
			
			// 搜索
			onSearch(){
				this.list = []
				this.page = 1
				this.getDetail()
			},
			
			onFilm(){
				this.index = 2
			},
			
			toDetail(e){
				uni.navigateTo({
					url:'/otherpages/film/Scheduling?id=' +e.cinemaId + '&filmid=' + this.id
				})
			},
			onDateChange(e){
				this.date = e
				this.list = []
				this.moveList = []
				this.page = 1
				this.getDetail()
			},
			getDetail(){
				this.request.httpTokenRequest({
					url: "movie/getScheduleCinemaList",
					method: "get"
				}, {
					cityCode:this.movieLocation.cityCode,
					regionCode:this.movieLocation.regionCode || '',
					keyword:this.search,
					filmId:this.id,
					date: this.date,
					page:this.page,
					longitude:this.movieLocation.longitude,
					latitude:this.movieLocation.latitude,
				}).then(data => {
					if (data.code == 0) {
						this.total = data.data.total
						this.search = ''
						data.data.cinemaList.forEach(item=>{
							this.moveList.push(item)
						})
					}else {
						this.$util.msg(data.msg)
					}
				}, error => {})
			},
			getTime(time){
				let y = time.getFullYear()
				let m = time.getMonth()+1 > 10 ? time.getMonth()+1 : '0' + Number(time.getMonth()+1)
				let d = time.getDate() > 10 ? time.getDate() : '0' + Number(time.getDate())
				let date = y + '-' + m + '-' + d
				return date
			},
			getDateList(){
				let now = new Date()
				let one_day = 86400000
				this.dataList.forEach((item,index)=>{
					if(index == 0) {
						this.date = this.getTime(new Date(Number(now)))
					}
					this.dataList[index].data = this.getTime(new Date(Number(now) + (index*one_day)))
					this.dataList[index].week = new Date(Number(now) + (index*one_day)).getDay()
				})
			},
		},
		onLoad(option) {
			this.id = option.id
			this.up_date = option.time
			this.getDateList()
			this.list = []
			this.moveList = []
			this.getDetail()
		},
		onReachBottom() {
			if(this.total > this.moveList.length){
				this.page++
				this.getDetail()
			}
		},
		computed: {
			  ...mapState({'movieLocation':'movieLocation'}),
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: url(https://qiniu-cdn.maeiyun.com/imgs/indexbg.png) no-repeat 0 0;
	}
	.film {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/indexbg.png) no-repeat 0 0;
		min-height: 100vh;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 44px) 30rpx 0;
		display: flex;
		flex-direction: column;
	}

	.location {
		width: 153rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 32rpx;
		opacity: 0.71;
		backdrop-filter: blur(10px);
		line-height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 10rpx;

		image {
			width: 22rpx;
			height: 30rpx;
			margin-right: 13rpx;
		}

		view {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 40rpx;
		}
	}

	.tab {
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		margin: 39rpx 0 30rpx;
		padding: 0 20rpx;
		.date_tab {
			display: flex;
			align-items: center;
			width: 1200rpx;
			justify-content: space-between;
			padding-right: 31rpx;
		
			view {
				padding: 24rpx 0;
				border-bottom: 3px solid #FFF;
			}
		
			#select {
				border-bottom: 3px solid #EF5233;
			}
		}
	}

	.film_list {
		.date {
			padding: 20rpx 32rpx 30rpx;
			text {
				font-size: 20rpx;
				color: #A3A3A3;
				line-height: 28rpx;
			}
			view {
				font-size: 30rpx;
				color: #181818;
				line-height: 42rpx;
			}
		}
	}
	#will {
		background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
	}

	.cinema_list {
		flex: 1;
		background-image: linear-gradient(to bottom , #FFF 0% , rgba(255,255,255,0) 6%);
		padding: 25rpx 0 0;
		border-radius: 20rpx;
		.screen {
			padding: 0 30rpx;
			margin-bottom: 25rpx;
			display: flex;
			align-items: center;
			.select {
				display: flex;
				align-items: center;
				text {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-right: 10rpx;
				}
				image {
					width: 13rpx;
					height: 8rpx;
				}
			}
			.search {
				width: 260rpx;
				height: 50rpx;
				background: #FEF8F6;
				border-radius: 25rpx;
				border: 1rpx solid #F4A797;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				input {
					flex: 1;
					font-size: 20rpx;
					color: #333333;
					height: 100%;
					padding: 0 15rpx;
				}
				.btn {
					width: 80rpx;
					height: 42rpx;
					background: #EE5232;
					border-radius: 25rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 42rpx;
					text-align: center;
				}
			}
		}
		
		.list {
			.item {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx 31rpx 28rpx;
				margin-bottom: 30rpx;
				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					view {
						font-size: 30rpx;
						font-weight: 600;
						color: #0F0807;
						line-height: 42rpx;
					}
					text {
						font-size: 22rpx;
						color: #888889;
						line-height: 30rpx;
						i {
							color: #EE5232;
							font-style: normal;
						}
					}
				}
				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 12rpx;
					view {
						font-size: 22rpx;
						color: #888889;
						line-height: 30rpx;
					}
					text {
						font-size: 22rpx;
						color: #888889;
						line-height: 30rpx;
					}
				}
			}
		}
	}

</style>